/* eslint-disable eqeqeq */
import { DatePicker2, Dialog, Field, Form, Input, Select } from '@alifd/next';
import { t } from '@lingui/macro';
import { observable } from 'mobx';
import { observer } from 'mobx-react-lite';
import React, { useEffect, useState } from 'react';
import { ENUMS, toSelectDataSource } from '../pages/Refund/stores/definitions';
import dayjs from 'dayjs';

export const PayDialog = observer(({ visible, byMethod, onClose, onOk, ...props }) => {
  const [data] = useState(() => observable({ method: byMethod !== undefined ? byMethod : 0, payTime: '', payRemark: '', refundAttachments: [] }));
  const formField = Field.useField();
  useEffect(() => {
    if (visible) {
      _.assign(data, { method: byMethod !== undefined ? byMethod : 0, payTime: '', payRemark: '' });
    }
  }, [visible]);
  const handleOk = () => {
    formField.validate((errors, values) => {
      if (!errors) {
        onOk({ ...values, payTime: values.payTime && values.payTime.toJSON() });
      }
    });
  };
  const handleChange = (values, item) => {
    const { name, value } = item;
    _.set(data, name, value);
  };

  if (!visible) return;

  return (
    <Dialog
      style={{ width: 500, height: 'auto' }}
      visible={visible}
      {...props}
      onOk={handleOk}
      closeMode={['close', 'esc']}
      onClose={onClose}
      onCancel={onClose}
    >
      <Form field={formField} value={data} onChange={handleChange} useLabelForErrorMessage>
        {byMethod === undefined &&
          <Form.Item label={t`支付方式`} required name="method">
            <Select style={{ width: '100%' }} hasClear={false} dataSource={toSelectDataSource(ENUMS.payMethod)} value={data.method} />
          </Form.Item>}
        {data.method == 1 &&
          <Form.Item label={t`实际支付时间`} required name="payTime">
            <DatePicker2
              showTime
              format="YYYY-MM-DD HH:mm"
              timePanelProps={{ format: 'HH:mm' }}
              disabledDate={(d) => d.isAfter(dayjs())}
              preset={{ [t`此刻`]: dayjs() }}
              value={data.payTime}
              style={{ width: '100%' }}
            />
          </Form.Item>}
        <Form.Item label={t`支付说明`} required name="payRemark">
          <Input.TextArea value={data.payRemark} />
        </Form.Item>
      </Form>

    </Dialog>
  );
});
